<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预约状态</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f8f9fa;
            color: #333;
            max-width: 750px;
            margin: 0 auto;
        }
        
        .status-card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }
        
        .status-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .loading-spinner {
            animation: spin 1.5s linear infinite;
        }
        .nav-tab.active {
            color: #2563eb;
            position: relative;
        }
        .nav-tab.active::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 3px;
            background-color: #2563eb;
            border-radius: 3px;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col">
    <!-- 顶部导航 -->
    <header class="bg-white py-4 px-6 shadow-sm">
        <div class="flex items-center relative">
            <a href="elderly-confirm.html" class="text-gray-600 absolute left-0 z-10">
                <i class="fas fa-chevron-left text-lg"></i>
            </a>
            <h1 class="text-xl font-semibold text-center flex-1">预约状态</h1>
        </div>
    </header>

    <main class="flex-1 p-6">
        <!-- 状态展示区 -->
        <div class="status-card bg-white rounded-xl p-6 mb-6 text-center">
            <div class="flex justify-center mb-4">
                <div class="w-20 h-20 rounded-full bg-yellow-100 flex items-center justify-center">
                    <i class="fas fa-spinner text-yellow-500 text-3xl loading-spinner"></i>
                </div>
            </div>
            <h2 class="text-xl font-semibold mb-2">审核中</h2>
            <p class="text-gray-500 mb-4">您的预约申请正在审核中，请耐心等待</p>
            <div class="text-sm text-gray-400">
                <i class="far fa-clock mr-1"></i> 预计完成时间：今天 15:30
            </div>
        </div>

        <!-- 预约详情卡片 -->
        <div class="status-card bg-white rounded-xl p-6 mb-6">
            <h3 class="text-lg font-medium mb-4 flex items-center">
                <i class="fas fa-clipboard-list text-blue-500 mr-2"></i> 预约详情
            </h3>
            <div class="space-y-3">
                <div class="flex">
                    <span class="text-gray-500 w-24">单号：</span>
                    <span class="flex-1">20240615001</span>
                </div>
                <div class="flex">
                    <span class="text-gray-500 w-24">服务：</span>
                    <span class="flex-1">居家养老护理（4小时）</span>
                </div>
                <div class="flex">
                    <span class="text-gray-500 w-24">时间：</span>
                    <span class="flex-1">2024-06-16 上午9:00</span>
                </div>
                <div class="flex">
                    <span class="text-gray-500 w-24">地址：</span>
                    <span class="flex-1">北京市朝阳区建国路88号</span>
                </div>
                <div class="flex">
                    <span class="text-gray-500 w-24">支付：</span>
                    <span class="flex-1 text-green-500">已支付 ¥320.00</span>
                </div>
            </div>
        </div>

        <!-- 服务人员信息区（审核通过后显示） -->
        <div class="status-card bg-white rounded-xl p-6 mb-6 hidden" id="staffInfo">
            <h3 class="text-lg font-medium mb-4 flex items-center">
                <i class="fas fa-user-nurse text-purple-500 mr-2"></i> 服务人员
            </h3>
            <div class="flex items-center mb-4">
                <div class="w-16 h-16 rounded-full bg-gray-200 overflow-hidden mr-4">
                    <img src="https://s.coze.cn/image/A__IiWkVsxI/" alt="护理员照片" class="w-full h-full object-cover">
                </div>
                <div class="flex-1">
                    <div class="flex items-center mb-1">
                        <h4 class="font-medium mr-2">张阿姨</h4>
                        <div class="text-yellow-400 text-sm">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star-half-alt"></i>
                            <span class="text-gray-500 ml-1">4.7</span>
                        </div>
                    </div>
                    <div class="text-sm text-gray-500">5年经验 · 服务过120+家庭</div>
                </div>
            </div>
            <div class="bg-gray-50 rounded-lg p-4">
                <h5 class="text-sm font-medium text-gray-700 mb-2">服务特长</h5>
                <div class="flex flex-wrap gap-2">
                    <span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs">老人护理</span>
                    <span class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs">康复训练</span>
                    <span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-xs">心理疏导</span>
                    <span class="px-3 py-1 bg-yellow-100 text-yellow-700 rounded-full text-xs">营养膳食</span>
                </div>
            </div>
        </div>

        <!-- 审核失败信息（审核失败时显示） -->
        <div class="status-card bg-white rounded-xl p-6 mb-6 hidden" id="rejectInfo">
            <div class="flex justify-center mb-4">
                <div class="w-20 h-20 rounded-full bg-red-100 flex items-center justify-center">
                    <i class="fas fa-times text-red-500 text-3xl"></i>
                </div>
            </div>
            <h2 class="text-xl font-semibold mb-2 text-center text-red-500">审核未通过</h2>
            <div class="bg-red-50 rounded-lg p-4 mt-4">
                <h5 class="text-sm font-medium text-red-700 mb-2">原因说明</h5>
                <ul class="space-y-2 text-sm text-red-600">
                    <li class="flex items-start">
                        <i class="fas fa-circle text-xs mt-1 mr-2"></i>
                        <span>您选择的护理服务时间与现有预约冲突</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-circle text-xs mt-1 mr-2"></i>
                        <span>您填写的老人健康状况需要更详细的评估</span>
                    </li>
                </ul>
            </div>
            <div class="mt-4 text-sm text-gray-500">
                <i class="fas fa-info-circle mr-1"></i> 如需帮助，请联系客服：400-123-4567
            </div>
        </div>
    </main>

    <!-- 底部操作区 -->
    <footer class="bg-white border-t py-4 px-6">
        <div class="flex space-x-3 mb-4">
            <button class="flex-1 py-3 bg-gray-100 text-gray-700 rounded-lg font-medium" id="cancelBtn">
                取消预约
            </button>
            <button class="flex-1 py-3 bg-blue-500 text-white rounded-lg font-medium hidden" id="contactBtn">
                联系护理员
            </button>
            <button class="flex-1 py-3 bg-blue-500 text-white rounded-lg font-medium hidden" id="rebookBtn">
                重新预约
            </button>
        </div>
        
        <!-- 确定按钮 -->
        <div class="mt-4">
            <button class="w-full py-3 bg-green-500 text-white rounded-lg font-medium hover:bg-green-600 transition-colors" id="confirmBtn" onclick="window.location.href='user-profile.html'">
                确定
            </button>
        </div>
        
        <div class="text-center text-xs text-gray-400 mt-4">
            <p><i class="fas fa-shield-alt mr-1"></i> 平台保障：实名认证 · 专业培训 · 保险覆盖</p>
        </div>
    </footer>

    <script>
        // 模拟不同状态切换（实际应用中根据API返回状态显示对应内容）
        function showStatus(status) {
            // 重置所有状态
            document.getElementById('staffInfo').classList.add('hidden');
            document.getElementById('rejectInfo').classList.add('hidden');
            document.getElementById('contactBtn').classList.add('hidden');
            document.getElementById('rebookBtn').classList.add('hidden');
            document.getElementById('cancelBtn').classList.remove('hidden');
            
            const statusCard = document.querySelector('.status-card:first-child');
            const icon = statusCard.querySelector('div > div');
            const title = statusCard.querySelector('h2');
            const desc = statusCard.querySelector('p');
            const time = statusCard.querySelector('div.text-sm');
            
            if(status === 'pending') {
                icon.className = 'w-20 h-20 rounded-full bg-yellow-100 flex items-center justify-center';
                icon.innerHTML = '<i class="fas fa-spinner text-yellow-500 text-3xl loading-spinner"></i>';
                title.textContent = '审核中';
                desc.textContent = '您的预约申请正在审核中，请耐心等待';
                time.innerHTML = '<i class="far fa-clock mr-1"></i> 预计完成时间：今天 15:30';
            } else if(status === 'approved') {
                icon.className = 'w-20 h-20 rounded-full bg-green-100 flex items-center justify-center';
                icon.innerHTML = '<i class="fas fa-check text-green-500 text-3xl"></i>';
                title.textContent = '审核通过';
                desc.textContent = '您的预约申请已通过审核';
                time.innerHTML = '<i class="far fa-calendar-check mr-1"></i> 服务时间：2024-06-16 上午9:00';
                
                document.getElementById('staffInfo').classList.remove('hidden');
                document.getElementById('cancelBtn').classList.add('hidden');
                document.getElementById('contactBtn').classList.remove('hidden');
            } else if(status === 'rejected') {
                icon.className = 'w-20 h-20 rounded-full bg-red-100 flex items-center justify-center';
                icon.innerHTML = '<i class="fas fa-times text-red-500 text-3xl"></i>';
                title.textContent = '审核未通过';
                title.className = 'text-xl font-semibold mb-2 text-center text-red-500';
                desc.textContent = '很抱歉，您的预约申请未通过审核';
                time.innerHTML = '<i class="fas fa-info-circle mr-1"></i> 请查看下方原因说明';
                
                document.getElementById('rejectInfo').classList.remove('hidden');
                document.getElementById('cancelBtn').classList.add('hidden');
                document.getElementById('rebookBtn').classList.remove('hidden');
            }
        }
        
        // 默认显示审核中状态
        showStatus('pending');
        
        // 模拟状态切换（测试用）
        setTimeout(() => {
            // showStatus('approved'); // 测试审核通过状态
            // showStatus('rejected'); // 测试审核失败状态
        }, 2000);
    </script>
</body>
</html>